<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>本地PVE对决 - 贪吃蛇大作战</title>
    <link rel="stylesheet" href="../plugin/bootstrap-5.3.8-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugin/bootstrap-icons-1.13.1/font/bootstrap-icons.css">
    <link rel="stylesheet" href="css/local-pve.css">
</head>
<body>
    <div class="game-container">
        <!-- 游戏头部信息 -->
        <div class="game-header">
            <div class="player-info">
                <div class="player-avatar">
                    <i class="bi bi-person-fill"></i>
                </div>
                <div class="player-name">玩家</div>
                <div class="player-score">得分: <span id="player-score">0</span></div>
            </div>
            
            <div class="game-timer">
                <div class="timer-label">剩余时间</div>
                <div class="timer-display" id="timer">02:00</div>
            </div>
            
            <div class="ai-info">
                <div class="ai-avatar">
                    <i class="bi bi-cpu-fill"></i>
                </div>
                <div class="ai-name">电脑AI</div>
                <div class="ai-score">得分: <span id="ai-score">0</span></div>
            </div>
            
            <!-- 挑战模式AI信息 -->
            <div id="ai2-info" class="ai-info" style="display: none;">
                <div class="ai-avatar">
                    <i class="bi bi-cpu-fill"></i>
                </div>
                <div class="ai-name">AI 2</div>
                <div class="ai-score">得分: <span id="ai2-score">0</span></div>
            </div>
        </div>

        <!-- 游戏画布 -->
        <div class="game-area">
            <canvas id="gameCanvas" width="800" height="600"></canvas>
            
            <!-- 游戏控制按钮 -->
            <div class="game-controls">
                <button id="pauseBtn" class="btn btn-warning">
                    <i class="bi bi-pause-fill"></i> 暂停
                </button>
                <button id="restartBtn" class="btn btn-info">
                    <i class="bi bi-arrow-clockwise"></i> 重新开始
                </button>
                <button id="backBtn" class="btn btn-secondary">
                    <i class="bi bi-arrow-left"></i> 返回
                </button>
            </div>
        </div>

        <!-- 游戏状态提示 -->
        <div id="gameOverlay" class="game-overlay hidden">
            <div class="overlay-content">
                <h2 id="overlayTitle">本地PVE对决</h2>
                <p id="overlayMessage">选择模式并开始游戏</p>
                
                <!-- 难度选择 -->
                <div class="difficulty-selector">
                    <div class="difficulty-option active" data-difficulty="easy">
                        <div class="difficulty-icon">
                            <i class="bi bi-emoji-smile"></i>
                        </div>
                        <div class="difficulty-info">
                            <h5>简单</h5>
                            <p>AI移动较慢，适合新手</p>
                        </div>
                    </div>
                    
                    <div class="difficulty-option" data-difficulty="medium">
                        <div class="difficulty-icon">
                            <i class="bi bi-emoji-neutral"></i>
                        </div>
                        <div class="difficulty-info">
                            <h5>中等</h5>
                            <p>标准难度，平衡的挑战</p>
                        </div>
                    </div>
                    
                    <div class="difficulty-option" data-difficulty="hard">
                        <div class="difficulty-icon">
                            <i class="bi bi-emoji-frown"></i>
                        </div>
                        <div class="difficulty-info">
                            <h5>困难</h5>
                            <p>AI具有高级策略，极具挑战</p>
                        </div>
                    </div>
                    
                    <div class="difficulty-option" data-difficulty="extreme">
                        <div class="difficulty-icon">
                            <i class="bi bi-emoji-angry"></i>
                        </div>
                        <div class="difficulty-info">
                            <h5>极限挑战</h5>
                            <p>终极考验，面对两条AI蛇的围攻</p>
                        </div>
                    </div>
                </div>
                
                <!-- 难度说明栏 -->
                <div id="difficulty-info" class="difficulty-info mt-3 p-3 rounded">
                    <h6><i class="bi bi-info-circle"></i> <span id="difficulty-title">简单模式特性</span>：</h6>
                    <div id="difficulty-description">
                        <ul class="mb-0 small">
                            <li>AI移动较慢，适合新手</li>
                            <li>游戏时间2分钟</li>
                            <li>标准贪吃蛇规则</li>
                        </ul>
                    </div>
                </div>
                
                <button id="startBtn" class="btn btn-success btn-lg mt-3">
                    <i class="bi bi-play-fill"></i> 开始游戏
                </button>
            </div>
        </div>

        <!-- 游戏结束弹窗 -->
        <div id="gameResult" class="game-result hidden">
            <div class="result-content">
                <h2 id="resultTitle">游戏结束</h2>
                <div class="result-stats">
                    <div class="stat">
                        <span class="stat-label">玩家得分:</span>
                        <span id="finalPlayerScore" class="stat-value">0</span>
                    </div>
                    <div class="stat">
                        <span class="stat-label">AI 1得分:</span>
                        <span id="finalAiScore" class="stat-value">0</span>
                    </div>
                    <div id="finalAi2ScoreStat" class="stat" style="display: none;">
                        <span class="stat-label">AI 2得分:</span>
                        <span id="finalAi2Score" class="stat-value">0</span>
                    </div>
                    <div class="stat">
                        <span class="stat-label">游戏时长:</span>
                        <span id="gameDuration" class="stat-value">00:00</span>
                    </div>
                </div>
                <div class="result-actions">
                    <button id="playAgainBtn" class="btn btn-primary">
                        <i class="bi bi-arrow-repeat"></i> 再玩一次
                    </button>
                    <button id="backToMenuBtn" class="btn btn-secondary">
                        <i class="bi bi-house-fill"></i> 返回主页
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入JavaScript文件 -->
    <script src="../plugin/jquery-3.7.1.min.js"></script>
    <script src="../plugin/bootstrap-5.3.8-dist/js/bootstrap.bundle.min.js"></script>
    <script src="js/ai/local-pve-ai.js"></script>
    <script src="js/local-pve.js"></script>
</body>
</html>